<template>
  <tm-scrolly ref="scrollRef" :height="listHeight" :refresher="false" @bottom="onScrollToBottom">
  <view>
    <!-- 故障列表 -->
    <view class="" v-if="recordList.length > 0">
      <uni-card v-for="(item,index) in recordList" :key="index">
        <view class="record" @click="clickToDetail(item.elevatorId)">
          <view class="record-address">
            {{ item.elevatorName }}
          </view>
          <view class="record-state">
            <DictTag :dict-value="getDict(DictEnum.IOT_FAULT_TYPE)" :value="item.faultType"></DictTag>
          </view>
          <view class="information">
            <!-- left -->
            <view class="information-left">

              <view class="record-time">
                故障时长:
                <text>{{ item.faultDuration }}</text>
              </view>
            </view>
            <!-- 已完成 right-->
            <view class="successState">
              <image src="../../../../static/image/fault/fault_icon.png" mode=""></image>
              <!-- <uni-icons type="success"></uni-icons> -->
              <view class="">
                <DictTag :dict-value="getDict(DictEnum.IOT_HANDLE_STATUS)" :value="item.disposeState"></DictTag>
              </view>
            </view>
          </view>
        </view>
      </uni-card>
    </view>
  </view>
  </tm-scrolly>
  <view class="" v-if="recordList.length === 0">
    <nullPage></nullPage>
  </view>
</template>

<script>
import nullPage from '@/components/null.vue'
import {listElevatorFault} from "@/api/iot/elevatorFault";
import {DictEnum} from "@/enums/dictEnum";
import {getDict} from "@/utils/dict";

export default {
  computed: {
    DictEnum() {
      return DictEnum
    }
  },
  components: {
    nullPage
  },
  data() {
    return {
      recordList: [],
      pageNum: 1,
      getListFlag: true,
      listHeight: 1000
    }
  },

  onLoad() {
    this.geteleva()
  },
  methods: {
    getDict,
    async geteleva() {
      let parme = {
        pageNum: this.pageNum,
        pageSize: 10,
      }
      const res = await listElevatorFault(parme)
      if (res) {
        if (res.rows.length < 10) {
          this.getListFlag = false;
        }
        this.recordList.push(...res.rows)
      }
    },
    clickToDetail(elevatorId) {
      uni.navigateTo(
          {
            url: '/pages/tabbar/polling/detailsMsg/detailsMsg?elevatorId=' + elevatorId
          }
      )
    },
    onScrollToBottom(e) {
      if (this.getListFlag) {
        this.pageNum = this.pageNum + 1;
        this.geteleva();
      }

    }
  },

}
</script>

<style scoped>
.uni-card {
  width: 670rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
  border-radius: 16rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  border: none;
  line-height: 280rpx;
  text-align: left;
}

.record {
  font-family: PingFang SC;
  font-weight: 400;
  /* margin: 40rpx 0; */
}

.record-address {
  font-size: 30rpx;
  color: #34363D;
  display: flex;
  justify-content: space-between;
  /* margin-bottom: 30rpx; */
}

.record-address text {
  color: #017EFE;

}

.record-state {
  font-size: 30rpx;
  color: #017EFE;
  margin-bottom: 30rpx;
}

/* 左右 信息*/
.information {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

.record-time {
  font-size: 24rpx;
  color: #989BA6;
}

.successState {
  width: 178rpx;
  background: #FF5753;
  height: 60rpx;
  text-align: center;
  box-shadow: 0px 5px 10px 0px rgba(58, 194, 17, 0.2);
  border-radius: 28rpx;
  color: #FFFFFF;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.successState image {
  width: 30rpx;
  height: 30rpx;
  background: #FF5753;
  border-radius: 10rpx;
  vertical-align: middle;
}

.successState text {
  font-size: 24rpx;
  margin-left: 10rpx;
}

/* 时间内容的间距 */
.record-time text {
  margin-left: 15rpx;
  color: #34363D;
  word-spacing: 15rpx;
  letter-spacing: 1rpx;
}
</style>
